import styles from './index.less';

export default function XinHao(props: any) {
  const { data } = props;
  return (
    <div className={styles.paichengBox}>
      <img
        className={styles.paichengImg}
        src={require('@/assets/indexbg/xhsc.png')}
      />
      <div className={styles.paichengContent}>
        {/* <div className={styles.title}>
          <img
            className={styles.titleleft}
            src={require('@/assets/index/titleleft.png')}
          />
          <i className={styles.titleText}>信号水池</i>
        </div> */}
        <div className={styles.valueContent}>
          {data?.map((item: any, index: number) => (
            <p key={item.id} className={styles.xinhaoVal}>
              <span>
                <img
                  className={styles.icon}
                  src={require(`@/assets/indexbg/x_${index}.png`)}
                  alt=""
                />
                <span>{item.deviceName}</span>
              </span>
              <span style={{ color: '#27F7F4' }}>
                <span>{item.realDataConvert}</span>
                <span className={styles.dw}>{item.unit}</span>
              </span>
            </p>
          ))}
        </div>
      </div>
    </div>
  );
}
